<template>
	<div class="lhShopInfo">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/dataExpress' }"><i class="lh fw_300 lh-seller fz_20"></i></el-breadcrumb-item>
			<el-breadcrumb-item>B端-商户</el-breadcrumb-item>
			<el-breadcrumb-item>灵活儿合作</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div class="essential-box">
				<el-row :gutter="20">
					<el-col :span="7">
						<div class="grid-content">
							<div class="key">合作状态：</div>
							<div class="val">
								<span class="text-primary" v-if="shopInfo.sign_status == '10'">未合作</span>
								<span class="text-warning" v-if="shopInfo.sign_status == '20'">已申请</span>
								<span class="text-success" v-if="shopInfo.sign_status == '30'">已合作</span>
								<span class="text-danger" v-if="shopInfo.sign_status == '40'">未通过</span>
								<span class="text-gray" v-if="shopInfo.sign_status == '50'">到期</span>
								<span class="text-gray" v-if="shopInfo.sign_status == '60'">停止合作</span>
								<el-button
									class="sign-audit-btn"
									type="danger"
									size="mini"
									v-if="jurisdiction.edit == 1"
									round
									@click="audit(1)"
									>合作审核</el-button
								>
							</div>
						</div>
					</el-col>
					<el-col :span="7">
						<div class="grid-content">
							<div class="key">合同状态：</div>
							<div class="val">
								<span class="text-success" v-if="shopInfo.contract_info && shopInfo.contract_info.status == 20"
									>已签约</span
								>
								<span class="text-danger" v-else>未签约</span>
							</div>
						</div>
					</el-col>
					<el-col :span="7">
						<div class="grid-content">
							<div class="key">用工状态：</div>
							<div class="val">
								<span class="text-success" v-if="shopInfo.is_order == '1'">已用工</span>
								<span class="text-danger" v-if="shopInfo.is_order == '2'">未用工</span>
							</div>
						</div>
					</el-col>
					<el-col :span="3">
						<div class="grid-content">
							<el-link type="primary" @click="goToShopInfo()">编辑基本信息</el-link>
						</div>
					</el-col>
					<el-col :span="7">
						<div class="grid-content">
							<div class="key">店铺名称：</div>
							<div class="val">{{ shopInfo.shop_name }}</div>
						</div>
					</el-col>
					<el-col :span="17">
						<div class="grid-content">
							<div class="key">销售：</div>
							<div class="val">{{ shopInfo.business_director }}</div>
						</div>
					</el-col>
					<el-col :span="7">
						<div class="grid-content">
							<div class="key">城市：</div>
							<div class="val">{{ shopInfo.city_name }}</div>
						</div>
					</el-col>
					<el-col :span="17">
						<div class="grid-content">
							<div class="key">商圈：</div>
							<div class="val">{{ shopInfo.area_name }}</div>
						</div>
					</el-col>
					<el-col :span="7">
						<div class="grid-content">
							<div class="key">申请时间：</div>
							<div class="val">{{ shopInfo.cooperation_apply_time }}</div>
						</div>
					</el-col>
					<el-col :span="7">
						<div class="grid-content">
							<div class="key">审核人：</div>
							<div class="val">{{ shopInfo.audit_name }}</div>
						</div>
					</el-col>
					<el-col :span="7">
						<div class="grid-content">
							<div class="key">审核时间：</div>
							<div class="val">{{ shopInfo.audit_time }}</div>
						</div>
					</el-col>
					<el-col :span="24" v-if="shopInfo.sign_status == 40 || shopInfo.sign_status == 60">
						<div class="grid-content">
							<div class="key">备注：</div>
							<div class="val" style="max-width: 80%;">{{ shopInfo.fail_reason }}</div>
						</div>
					</el-col>
				</el-row>
			</div>
			<el-tabs type="border-card">
				<el-tab-pane label="签约信息">
					<template v-if="shopInfo.shop_sn">
						<use-sign-setting
							ref="signSetting"
							:shop_info="shopInfo"
							:jurisdiction="jurisdiction"
							:shop_sn="shopInfo.shop_sn"
							@regainClick="regain"
						/>
					</template>
				</el-tab-pane>
				<el-tab-pane label="结算信息">
					<template v-if="shopInfo.shop_sn">
						<use-pay-setting
							ref="signSetting"
							:shop_info="shopInfo"
							:jurisdiction="jurisdiction"
							:shop_sn="shopInfo.shop_sn"
							@regainClick="regain"
						/>
					</template>
				</el-tab-pane>
				<el-tab-pane label="用工设置">
					<template v-if="shopInfo.shop_sn">
						<use-employee-setting
							:industry_id="shopInfo.industry_id"
							:city_id="shopInfo.city_id"
							:area_id="shopInfo.area_id"
							:shop_sn="shopInfo.shop_sn"
						/>
					</template>
				</el-tab-pane>
				<el-tab-pane label="打卡设置">
					<template v-if="shopInfo.shop_sn">
						<use-work-setting
							ref="signSetting"
							:shop_info="shopInfo"
							:jurisdiction="jurisdiction"
							:shop_sn="shopInfo.shop_sn"
							@regainClick="regain"
						/>
					</template>
				</el-tab-pane>
			</el-tabs>
		</div>

		<!-- 审核状态-弹框 -->
		<el-dialog
			:title="'店铺审核'"
			:visible.sync="shopAuditShow"
			width="500px"
			:close-on-click-modal="false"
			:before-close="hiddenDialog"
		>
			<div class="auditCentent">
				<div class="audit-dialog">
					<div class="key"><i class="lhadmin lhadmin-wujiaoxing"></i>审核结果</div>
					<div class="val">
						<el-radio v-model="auditInfo.sign_status" label="30">签约成功</el-radio>
						<el-radio v-model="auditInfo.sign_status" label="40">签约失败</el-radio>
						<el-radio v-model="auditInfo.sign_status" label="60">停止合作</el-radio>
					</div>
				</div>

				<div class="audit-dialog" v-if="auditInfo.sign_status == 40 || auditInfo.sign_status == 60">
					<div class="key"><i class="lhadmin lhadmin-wujiaoxing"></i>备注</div>
					<div class="val">
						<el-input
							type="textarea"
							:rows="4"
							:cols="32"
							maxlength="150"
							show-word-limit
							v-model="auditInfo.fail_reason"
						></el-input>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="shopAuditSave(1)">确 定</span>
				<span class="resetBtn" @click="hiddenDialog">取 消</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { fetchShopInfo, setShopEdit, getShopInfoPerm } from '@/api/shop.js'
import useSignSetting from './UseSignSetting'
import usePaySetting from './UsePaySetting'
import useWorkSetting from './UseWorkSetting'
import useEmployeeSetting from './UseEmployeeSetting'
export default {
	name: 'ShopCooperationInfo',
	components: {
		useSignSetting,
		usePaySetting,
		useWorkSetting,
		useEmployeeSetting
	},
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			shop_sn: '',
			shopInfo: {},
			shopAuditShow: false,
			// 权限
			jurisdiction: {
				contractAudit: '', //签约信息
				contractInfo: '', //审核合同
				edit: '', //结算信息
				settlementInfo: '', //店铺审核
				shopConfig: '' //打卡设置
			},
			//店铺审核
			auditInfo: {
				sign_status: '',
				fail_reason: ''
			}
		}
	},

	async created() {
		try {
			// 获取权限
			let res = await getShopInfoPerm({ id: this.$route.query.shop_id })
			for (let key in res) {
				if (key == 'shop/contractAudit') this.jurisdiction.contractAudit = res[key]
				if (key == 'shop/contractInfo') this.jurisdiction.contractInfo = res[key]
				if (key == 'shop/edit') this.jurisdiction.edit = res[key]
				if (key == 'shop/settlementInfo') this.jurisdiction.settlementInfo = res[key]
				if (key == 'shop/shopConfig') this.jurisdiction.shopConfig = res[key]
			}
		} catch (err) {
			console.log(err)
		}
	},

	async mounted() {
		this.fetchShopInfo()
	},

	methods: {
		async fetchShopInfo() {
			try {
				let res = await fetchShopInfo({ id: this.$route.query.shop_id })
				if (res.contract_info.audit_time == '0000-00-00 00:00:00') res.contract_info.audit_time = ''
				if (res.contract_info.sign_time == '0000-00-00 00:00:00') res.contract_info.sign_time = ''

				this.shop_sn = res.shop_sn
				this.shopInfo = res
			} catch (err) {
				console.log(err)
			}
		},

		//审核弹框
		audit() {
			this.auditInfo.sign_status = this.shopInfo.sign_status.toString()
			this.shopAuditShow = true
		},

		// 店铺审核保存
		async shopAuditSave() {
			try {
				const { sign_status, fail_reason } = this.auditInfo

				if (![30, 40, 60].includes(+sign_status)) {
					return this.$message.error('请选择店铺审核结果')
				}

				if (+sign_status === 40 && !fail_reason) return this.$message.error('请输入失败原因！')

				await setShopEdit({
					id: this.shopInfo.id,
					audit_name: this.manageInfo.username,
					...this.auditInfo
				})
				this.fetchShopInfo()
				this.hiddenDialog()
			} catch (err) {
				console.log(err)
			}
		},

		//隐藏弹框
		hiddenDialog() {
			this.shopAuditShow = false
			this.auditInfo.fail_reason = ''
		},

		// 去编辑店铺详情
		goToShopInfo() {
			const { href } = this.$router.resolve({
				path: '/shopTag',
				query: { id: this.$route.query.shop_id }
			})
			window.open(href, '_blank')
		},

		back() {
			this.$router.go(-1)
		},

		async regain() {
			await this.fetchShopInfo()
			this.$refs.signSetting.shopInfo = this.shopInfo
		}
	}
}
</script>

<style scoped>
.essential-box {
	margin-bottom: 30px;
}
.essential-box .grid-content {
	display: flex;
	height: auto;
	padding: 10px 0;
	height: 30px;
	line-height: 30px;
}
.essential-box .grid-content .key {
	width: 110px;
	font-size: 13px;
	color: #999999;
	text-align: right;
}
.essential-box .grid-content .val {
	font-size: 14px;
	padding-left: 20px;
	color: #222222;
}
.sign-audit-btn {
	margin-left: 20px;
	font-size: 12px;
	padding: 3px 10px;
}
.audit-dialog {
	display: flex;
	padding-bottom: 20px;
}
.audit-dialog .key {
	width: 100px;
	color: #999999;
}
.el-row {
	padding-bottom: 50px;
}
</style>
<style>
.lhShopInfo .edit-btn .el-button.is-round {
	padding: 10px 20px;
}
.lhShopInfo .el-radio-button__orig-radio:disabled:checked + .el-radio-button__inner {
	background: #3a54e2;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/ShopCooperationInfo.vue